<template>
<el-tabs
  :value="active"
  type="border-card"
  :class="$style.tabs"
  stretch
  @tab-click="onTurn"
>
  <el-tab-pane
    v-for="(list,i) in tabList"
    :key="i"
    :label="names[i]"
    :name="i.toString()"
    :disabled="!tabList[i]"
  >
    <p v-if="i<3" :class="$style.area">
      <el-link
        v-for="x in list"
        :key="x.adcode"
        :class="cur(i, x.adcode)"
        v-bind="attrs"
        @click.native="onCheck(i, x)"
      >
        {{ x.name }}
      </el-link>
    </p>
    <p v-else :class="$style.area">
      <el-link
        v-for="(x, j) in list"
        :key="x.adcode + j"
        :class="cur(i, x.adcode + j)"
        v-bind="attrs"
        @click.native="onEnd(j, x)"
      >
        {{ x.name }}
      </el-link>
    </p>
  </el-tab-pane>
</el-tabs>
</template>

<script>

export default {
  components: {
  },
  props: ['active', 'tabList'],
  data() {
    return {
      names: ['省', '市', '区', '街道'],
      value: ['', '', '', ''],                // 省市县街选中数据
      attrs: {
        underline: false,
        href: 'javascript:;',   // 防止连击导致的选中效果
      },
    };
  },
  computed: {
  },
  mounted() {
  },
  methods: {
    onTurn(tab) {
      const { name } = tab;
      this.$emit('update:active', name);
    },
    cur(idx, key){
      const { value } = this;
      const { active } = this.$style;
      return value[idx] === key ? active : '';
    },
    onCheck(idx, item) {
      const { value } = this;
      const { adcode, name, level } = item;
      // 重选清空老数据
      const nValue = value.map((x, i) => {
        if (i < idx) {
          return x;
        }
        if (i === idx) {
          return adcode;
        }
        return '';
      });
      this.value = nValue;      // 编码存入选中的值
      this.$emit('check', { idx, adcode, name, level }); //
    },
    // 街道没有独有的adcode，均继承父类（区县）的adcode
    onEnd(idx, item){
      const { value, $set } = this;
      const { adcode, name, level, center } = item;
      const code = adcode + idx;
      $set(value, 3, code);
      this.$emit('check', { idx: 3, adcode: code, name, level, center });
    },
  },
};
</script>

<style lang="less" module>
.tabs{
  border: none;
  :global{
    .el-tabs__content{
      height: 300px;
      overflow: auto;
      padding: 0;
    }
    .el-link.el-link--default:hover{
      color: #606266;
    }
  }
}
.area{
  .active{
    background-color: #f5f7fa;
    color: #409EFF;
    &:hover{
      color: #409EFF!important;
    }
  }
  a{
    display: block;
    padding: 10px 20px;
    &:hover{
      background-color: #f5f7fa;
    }
  }

}
</style>
